<template>
	<view style="margin-left: 20px; margin-right: 10px;">
		<up-navbar @leftClick="leftClick" safeAreaInsetTop placeholder>
			<template #right>
				<up-text text="确定" type="primary" @click="confirm"></up-text>
			</template>
		</up-navbar>
		<div class="title">
			<up-text text="我的优势" size="30px" bold="true"></up-text>
			<up-text text="丰富的个人优势介绍,更能赢得BOSS的青睐" style="margin-top: 5px;"></up-text>
			<div class="container">
				<textarea ref="textarea" v-model="value" class="fullscreen-textarea" placeholder="请输入内容"
					@input="updateCharacterCount">
				</textarea>
				<div class="char-count">{{ characterCount }}/1000</div>
			</div>
		</div>
		<up-modal :content="content" :show="show" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="show = false" contentTextAlign="center"></up-modal>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			let advantage = JSON.parse(options.resume);
			console.log(advantage)
			this.resume = advantage;
			if(advantage.personalStrengths !== '请填写个人优势'){
				this.value = advantage.personalStrengths;
			}
		},
		data() {
			return {
				resume:{},
				value: '',
				characterCount: 0,
				show: false,
				content: '是否保存编辑内容？'
			}
		},
		methods: {
			//左上方返回
			leftClick(){
				this.show = true;
			},
			updateCharacterCount() {
				// 更新字数统计  
				this.characterCount = this.value.length;
				if (this.characterCount > 1000) {
					this.value = this.value.slice(0, 1000); // 限制输入为1000字  
					this.characterCount = 1000; // 更新字数统计为1000  
				}
			},
			//弹出框取消
			cancel(){
				uni.navigateTo({
					url:"/pages/personal/onlineResumeView"
				})
			},
			//弹出框确认
			confirm(){
				//保存数据库，然后返回
				this.resume.personalStrengths = this.value;
				this.$api.updateUserResume(this.resume).then((res)=>{
					if(res.data === 'ok'){
						uni.showToast({
							title:'修改成功'
						})
					}
				})
				uni.navigateTo({
					url:"/pages/personal/onlineResumeView"
				})
			},
		}
	}
</script>

<style>
	.title {
		/* margin-top: 50px; */
		/* border: 1px solid red; */
		height: 100px;
	}

	.container {
		position: relative;
		width: 100%;
		height: calc(100vh - 150px);
		/* 上部的标题和导航高度调节 */
		margin: 0;
		padding: 0;
		overflow: hidden;
		margin-top: 10px;
		margin-left: -8px;
	}

	.fullscreen-textarea {
		width: 100%;
		height: 100%;
		border: none;
		resize: none;
		box-shadow: none;
		outline: none;
		padding: 10px;
		/* 添加内边距使文本舒适 */
	}

	.char-count {
		position: absolute;
		bottom: 10px;
		/* 距离底部10px */
		right: 10px;
		/* 距离右侧10px */
		color: #999;
		/* 字数显示样式 */
	}
</style>